<template> 
  <div>
    <div id="mask" :class="{show: isMenuVisible}" >
    <div class="background"></div>
  </div>
      <div id="top">
        <div class="w640">
          <div class="title">
            <dl class="search">
              <dt><i class="iconfont icon-search"></i></dt>
              <dd><input type="text" placeholder="神经酸润眼液" v-model="searchProduct"></dd>
            </dl>
          </div>
          <div class="icon_link left" >
            <a  href="javascript:void(0)" @click="showMenu">
              <i class="iconfont icon-menu_learn"  ></i>
            </a>
          </div>
          <div class="icon_link right">
            <a>
              <i class="iconfont icon-scan"></i>
            </a>
          </div>
             <!-- 遮罩层 -->
          <div id="menu" ref="menu">
             <!-- 菜单页面 -->
          <menuIndex></menuIndex>
          </div>
        </div>
      </div>
      <!-- nav -->
      <ul class="app-header-nav">
        <li class="home"  >
          <RouterLink to="/">首页</RouterLink>
        </li>
        <li class="home" v-for="item in categoryStore.topFiveItems "  :key="item.id" >
          <RouterLink  exact-active-class="active" :to="`/category/${item.id}`">{{ item.name }}</RouterLink>
        </li>
      </ul>
       <div id="appIndex">
        <!-- 轮播图 -->
        <HomeBanner></HomeBanner>
        <div id="quick_menu">
          <a href="">
            <dl>
              <dt><i class="iconfont icon-my_meetings"></i></dt>
              <dd>人员管理</dd>
            </dl>
          </a>
          <a href="">
            <dl>
              <dt><i class="iconfont icon-ticket"></i></dt>
              <dd>优惠券</dd>
            </dl>
          </a>
          <a href="">
            <dl>
              <dt><i class="iconfont icon-collect_line"></i></dt>
              <dd>收藏夹</dd>
            </dl>
          </a>
          <a href="">
            <dl>
              <dt><i class="iconfont icon-jifen"></i></dt>
              <dd>积分管理</dd>
            </dl>
          </a>
        </div>
        <div id="index_ad">
          <a href=""><img src="@/assets/images/ad1.png" alt=""></a>
          <a href=""><img src="@/assets/images/ad2.png" alt=""></a>
        </div>
       <!-- 商品详情 -->
        <HomeProduct></HomeProduct>
       </div> 
    
    </div>
 <!-- 底部固定导航 -->
 <bottomNav></bottomNav>
</template>
<script lang="ts" setup > 
import bottomNav from "@/components/bottomNav/index.vue"
import { ref, onMounted,computed} from 'vue';
import useCategoryStore  from "@/store/modules/home.ts"
import HomeBanner from "./components/HomeBanner.vue"
import HomeProduct from "./components/HomeProduct.vue";
const categoryStore=useCategoryStore()
//引入菜单
import menuIndex from "@/components/menu/index.vue"
//搜索产品
let searchProduct=ref('')

//切换遮罩层响应式数据
const menu = ref<HTMLElement | null>(null);
const  isMenuVisible =ref<boolean>(false)
//点击按钮遮罩层切换
const showMenu = () => {
  if (menu.value ) {
    menu.value.classList.toggle('show');
    isMenuVisible.value = !isMenuVisible.value;
  }
};
onMounted(() => {
  //nav
  categoryStore.getCategory()
});
// //过滤出搜索产品
// const filteredProducts = computed(() => {
//       const searchTerm = searchProduct.value.toLowerCase();
//       return UserStore.productList.filter(product => {
//         return product.name.toLowerCase().includes(searchTerm);
//       });
// });
</script>
<script lang="ts">
export default{
  name:'Home'
}
</script>

<style scoped lang="scss">
 #mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 
}
.app-header-nav {
  margin-top: 34px;
    width: 820px;
    display: flex;
    padding-left: 25px;
    position: relative;
    z-index: 998;
  
    li {
      margin-right: 40px;
      width: 38px;
      text-align: center;
  
      a {
        font-size: 16px;
        line-height: 32px;
        height: 32px;
        display: inline-block;
        color: #000;
  
        &:hover {
          color: $bannerColor;
          border-bottom: 1px solid $bannerColor;
        }
      }
  
      .active {
        color: $bannerColor;
        border-bottom: 1px solid $bannerColor;
      }
    }
  }


 
</style>